<!--
 * @Author: TomatoJade e0792344@u.nus.edu
 * @Date: 2022-10-26 09:08:58
 * @LastEditors: TomatoJade e0792344@u.nus.edu
 * @LastEditTime: 2022-10-27 15:22:00
 * @FilePath: \learnjs\demo1\copy_index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: fisher
 * @Date: 2022-10-20 17:35:47
 * @LastEditTime: 2022-10-27 14:50:54
 * @LastEditors: TomatoJade e0792344@u.nus.edu
 * @Description: 
 * @FilePath: \jiang_learnjs\demo1\copy_index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0 auto;
        /* 一般body不设置，要设置在对应元素的父级上 */
        position: relative;
        /* 防止页面溢出视口 */
        overflow: hidden;
    }

    .background {
        width: 100%;
        height: 100%;
        /* width和max-width属于同类型属性，都可以影响元素宽度，后写的会覆盖先写的 */
        /* max-width: 3840px; */
        background: #487eb0;
        top: 0;
        
        z-index: -1;
    }

    .header {
        width: 100%;
        /* min-width: 1920px; */
        height: 75px;

        padding: 0;
        position: absolute;
        /* top定位属性，一定要在元素自身是absolute、fixed、relative或者sticky */
        top: 0px;


    }

    #top-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        left: 0px;
        z-index: 1;
        /* display: none; */
    }

    #top-layer>img {
        width: 100%;
        height: 100%;
    }

    #top-title {
        /* left: 1600px;
        position: relative;
        top: 5px;
        z-index: 2; */
        width: 320px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;

        /* margin: 0; */
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
        /* z-index: 2; */


    }

    #top-title>img {
        width: 100%;
    }

    .header_right {
        /* width: 100px;
        height: 50px;
        background-color: red; */
        display: flex;
        align-items: center;
        color: #C1E8FD;
        font-size: 12px;
        position: absolute;
        top: 17%;
        right: 31px;

        z-index: 2;

    }

    .header_right_shezhiicon {
        width: 14px;
        height: 14px;
    }

    .header_right_shezhi {
        margin-left: 10px;
    }

    .header_right_touxiang {
        width: 32px;
        height: 32px;
        margin-left: 20px;
    }

    #settingicon {
        width: 14.41px;
        height: 14.41px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #settingicon>img {
        width: 100%;
    }

    .setting {
        font-size: 12px;
        margin-left: 10px;
    }

    #usericon {
        width: 32px;
        height: 32px;
        margin-left: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #usericon>img {
        width: 100%;
    }

    /* #usericon {

        position: relative;
        top: 13px;
        right: 31px;
        z-index: 3;
        float: right;
    } */

    /* #settingicon {
        position: absolute;
        top: 53px;
        right: 200px;
        float: right;
        width: 14.41px;
        height: 14.41px;
        z-index: 3;

    } */

    /* .setting {
        position: absolute;
        top: 70px;
        right: 118px;
        width: 50px;
        height: 32px;
        float: right;
        font-size: 20px;
        font-family: Microsoft YaHei-Regular;
        font-weight: 400;
        color: #C1E8FD;
        line-height: 0px;
        z-index: 4;
    } */

    #datetime {
        color: #C1E8FD;
        position: absolute;
        top: 10px;
        left: 40px;
        font-size: 14px;
        z-index: 3;
    }

    .rightbar {
        display: flex;
        flex-direction: column;
        right: 40px;
        top: 181px;
        gap: 60px;
        /* float: right; */
        position: absolute;

    }

    .rightbar img {
        width: 72px;
        height: 68px;
    }

    .leftbar {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 320px;
        height: 620px;
        top: 141px;
        left: 25px;
        background: rgba(0, 13, 24, 0.6);
        border-radius: 0px 0px 0px 0px;
        /* opacity: 0.6; */
        /* 内边距注意不要影响整个盒子宽高 */
        padding-top: 12px;
        padding-left: 26px;
        box-sizing: border-box;
    }

    #leftborder1 {
        width: 30px;
        height: 4px;
        top: -16px;
        position: absolute;
        background: #05AFE6;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
    }

    #leftborder2 {
        width: 18px;
        height: 4px;
        background: #02739B;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        top: -16px;
        left: 20px;
        position: absolute;
        background: #05AFE6;
    }

    .lefticon1 {
        width: 46px;
        height: 44px;
        left: 70px;
        top: -1135px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 122px;
        z-index: 4;
    }

    .lefticon2 {
        width: 46px;
        height: 44px;
        left: 70px;
        top: -520px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 270px;
        z-index: 4;
    }

    h1 {
        width: 250px;
        height: 52px;
        top: -1235px;
        left: 140px;
        position: relative;
        letter-spacing: 8px;
        text-align: left;
        font-family: Microsoft YaHei-Bold;
        font-weight: bold;
        font-size: 40px;

    }

    h2 {
        width: 250px;
        height: 52px;
        top: -1215px;
        left: 235px;
        text-align: left;
        position: relative;
        letter-spacing: 8px;
        font-family: Microsoft YaHei-Regular;
        font-weight: 400;
        font-size: 40px;
        color: #00d5ff;
    }

    h3 {
        width: 350px;
        height: 52px;
        top: -1145px;
        left: 235px;
        text-align: left;
        position: relative;
        letter-spacing: 8px;
        font-family: Microsoft YaHei-Regular;
        font-weight: 400;
        font-size: 40px;
        color: #FFFFFF;
    }

    h4 {
        width: 350px;
        height: 52px;
        top: -705px;
        left: -110px;
        text-align: left;
        position: relative;
        letter-spacing: 8px;
        font-family: Microsoft YaHei-Regular;
        font-weight: 400;
        font-size: 40px;
        color: #FFFFFF;
    }

    .menu1 {
        display: flex;
        flex-direction: column;
        gap: 40px;
        float: left;
        position: relative;
    }

    a:link {
        color: #FFFFFF;
        text-decoration: none;
    }

    a:visited {
        color: #FFFFFF;
        text-decoration: none;
    }

    .bottom {
        position: absolute;
        width: 100%;
        bottom: 0px;
        padding: 0;
        /* left: 13%; */
        margin: 0;
    }

    /* 空格和>的区别？ */
    .bottom>img {
        width: 100%;
        height: 100%;
    }

    /* 建议布局结构样式表 */
    .catalogue {
        width: 100%;
        color: #FFFFFF;
        font-size: 20px;
        margin-top: 20px;
    }

    /* 标题 */
    .catalogue_title {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .catalogue_title>img {
        width: 22px;
        height: 22px;
    }

    .catalogue_title>span {
        font-weight: bold;
    }


    /* 内容 */
    .catalogue_content {
        display: flex;
        flex-direction: column;
        gap: 20px;

        margin-top: 20px;
        margin-left: 85px;

    }

    .catalogue_content>span {
        cursor: pointer;
    }

    .catalogue_content>span:hover {
        color: #00d5ff;
    }
</style>


<!-- <script>
    var i = 0;
    function myDate() {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        document.getElementById("datetime").innerHTML = year + "/" + month + "/" + day + "  " + hours + ":" + minutes + ":" + seconds;
    }
    setInterval(myDate, 1000);
</script> -->


<body>
    <div class="background"></div>
    <div class="header">
        <p id="datetime" onload=myDate()></p>
        <!-- 注意元素相对父元素居中的方式 -->

        <!-- 比较紧凑的零散元素，可以用一个div统一包起来 -->
        <div class="header_right">
            <img class="header_right_shezhiicon" src="首页_slices\205设置@2x.png" alt="">
            <span class="header_right_shezhi">设置</span>
            <img class="header_right_touxiang" src="首页_slices\touxiang.png" alt="">
        </div>
        <!-- <p id="top-title">
            <img src="首页_slices\组 105@2x.png" alt="biaoti">
        </p> -->
        <!-- <p id="top-layer"><img src="首页_slices\样式八@2x.png" alt="tup">
        </p> -->
        <img id="top-layer" src="首页_slices\样式八@2x.png" alt="bg">
        <img id="top-title" src="首页_slices\组 105@2x.png" alt="logo">

    </div>

    <div class="rightbar" width="72px" height="68px">
        <a href=""><img src="首页_slices\蒙版组 3@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 4@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 47@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 6@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 48@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 49@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 65@2x.png" alt=""></a>
    </div>

    <div class="leftbar">

        <!-- <p id="leftborder1"></p>
        <p id="leftborder2"></p>
  
        <div class="lefticon1">
            <p style=" border: #707070;border-style: dotted;border-width: 1px;"><img src="首页_slices\蒙版组 50@2x.png"
                    alt="">
            </p>
            <p style=" border: #707070;border-style: dotted;border-width: 1px;"><img src="首页_slices\蒙版组 62@2x.png"
                    alt="">
            </p>
        </div>

        <div class="lefticon2">
            <p style=" border: #707070;border-style: dotted;border-width: 1px;"><img src="首页_slices\蒙版组 64@2x.png"
                    alt="">
            </p>
            <p style=" border: #707070;border-style: dotted;border-width: 1px;"><img src="首页_slices\蒙版组 63@2x.png"
                    alt="">
            </p>
        </div>

        <h1 style="color:white;">
            <a href="">项目区位</a>
            <br><br><br><br>
            <a href="">现状概况</a>
            <br><br><br><br> <br><br><br><br><br>
            <a href="">上位规划</a>
            <br><br><br><br><br><br><br>
            <a href="">规划方案</a>
        </h1>

        <h2><a href="">项目区位</a></h2>

        <h3 class="menu1">
            <a href="">南山水厂现状</a>
            <a href="">地块用地条件</a>
            <a href="">地下空间规划</a>
            <a href="">地面交通规划</a>
        </h3>

        <h4 class="menu1">
            <a href="">总平面图布置</a>
            <a href="">分期实施方案</a>
            <a href="">地块规划方案</a>
        </h4> -->

        <!-- 建议布局结构 -->
        <div class="catalogue">
            <div class="catalogue_title">
                <img src="首页_slices\蒙版组 50@2x.png" alt="icon">
                <span>项目区位</span>
            </div>
            <div class="catalogue_content">
                <span>项目区位</span>
            </div>
        </div>
        <div class="catalogue">
            <div class="catalogue_title">
                <img src="首页_slices\蒙版组 62@2x.png" alt="icon">
                <span>现状概况</span>
            </div>
            <div class="catalogue_content">
                <span>南山水厂现状</span>
                <span>地块用地条件</span>
                <span>地下空间规划</span>
                <span>地面交通规划</span>
            </div>
        </div>
        <div class="catalogue">
            <div class="catalogue_title">
                <img src="首页_slices\蒙版组 62@2x.png" alt="icon">
                <span>上位规则</span>
            </div>
            <div class="catalogue_content">
                <span>总平面图布置</span>
                <span>分期实施方案</span>
                <span>地块规划方案</span>
            </div>

        </div>
        <div class="catalogue"></div>
    </div>




    <img class="bottom" src="首页_slices\底部@2x.png" alt="">


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>
<script>
    let timer = {}
    window.onload = () => {
        timer = setInterval(() => {
            document.getElementById("datetime").innerHTML = dayjs().format("YYYY/MM/DD HH:mm:ss")
        }, 1000);
    }
</script>

</html>